<template>
	<div class="content_">
		<div class="left_content">
			<div class="topTabs d-flex m-b20">
				<div
						v-permission
						class="item"
						@click="toPath(item.id)"
						v-for="(item, index) in state.topTabs"
						:key="index"
						:style="{ width:(100/state.topTabs.length*100)+'%' }"
				>
					<div class="icon">
						<svg-icon :icon-class="item.icon" class="icon_" />
					</div>
					<div class="name">{{ item.name }}</div>
				</div>
			</div>

			<CommonTitle titleName="我参与的项目">
				<template #rightCnBox>
					<div style="flex: 1;display: flex;justify-content: flex-end;">
						<el-switch
								v-model="isActive"
								active-text="卡片"
								inactive-text="列表"
						/>
					</div>
				</template>
			</CommonTitle>
			<div class="my_project d-flex" v-if="state.myProject.length > 0">
				<div class="item" v-if="isActive" v-for="(item, index) in state.myProject" :key="index">
					<div class="title">{{ item.projectName }}</div>
					<div class="col">
						<span class="icon"
						><svg-icon icon-class="invest-icon-l-col1" class="icon"
						/></span>
						<span class="col_title m-l5 m-r5">项目类型：</span>
						<span class="text">{{ item.projectTypeName }}</span>
					</div>
					<div class="col">
						<span class="icon"
						><svg-icon icon-class="invest-icon-l-col2" class="icon"
						/></span>
						<span class="col_title m-l5 m-r5">项目业态：</span>
						<span class="text">{{ getProjectBusiness(item.typeOfBusiness) }}</span>
					</div>
					<div class="col">
						<span class="icon">
							<svg-icon icon-class="invest-icon-l-col3" class="icon" />
						</span>
						<span class="col_title m-l5 m-r5">项目负责人：</span>
						<span class="text">{{ item.responsibleUserName }}</span>
						<!-- <image src="" class="img"></image> -->
					</div>
					<div class="time">
						<svg-icon icon-class="invest-icon-l-col4" class="icon m-r5" />
						{{ item.planEndTime || "0000 - 00 - 00 " }}
					</div>
				</div>
				<div class="table-list-content" v-else>
					<public-table
							ref="tableRef"
							height="400px"
							:table-data="state.myProject"
							:table-option="tableOption"
							:page="pageParam"
							:is-paging="false"
					></public-table>
				</div>
			</div>
			<div class="zwu" v-else>暂无数据</div>
			<CommonTitle titleName="总进度分析"></CommonTitle>
			<schedule v-if="state.data.length > 0" :data="state.data"></schedule>
			<div class="zwu" v-else>暂无数据</div>
		</div>
		<div class="right_content">
			<div class="top_info">
				<div class="title_info m-b20 d-flex">
					<div class="img d-flex a-center j-center m-r10">
						<el-avatar shape="square" :size="50"  src="//s.weituibao.com/1582958061265/mlogo.png" />
					</div>
					<div class="text">
						<div class="name">{{store.state.user.username}}</div>
						<div class="section m-t5">{{store.state.user.departmentName}}</div>
					</div>
				</div>

				<div class="top_info_cont d-flex">
					<div class="item">
						<div class="num">{{ state.total }}</div>
						<div class="text">全部任务</div>
					</div>
					<div class="item">
						<div class="num">{{ state.doing }}</div>
						<div class="text">进行中</div>
					</div>
					<div class="item">
						<div class="num">{{ state.done }}</div>
						<div class="text">已完成</div>
					</div>
				</div>
			</div>

			<CommonTitle titleName="代办事项" class="m-t20">
				<template #rightCnBox>
					<el-button v-permission="['toDetails']" size="small" style="margin-left: auto" @click="toPath('2')"
					>查看更多</el-button
					>
				</template>
			</CommonTitle>
			<div class="behalf">
				<div class="timeM">
					<el-calendar v-model="timeValue" />
				</div>
				<div class="text_conten">
					<div
							class="item d-flex m-t10"
							v-for="(v, i) in state.behalfList"
							:key="i"
					>
						<div class="icon">
							<!-- 项目 -->
							<svg-icon icon-class="invest-icon-l-col5" class="icon" />
							<!-- 会议 -->
							<!-- <svg-icon icon-class="invest-icon-l-col6" class="icon" /> -->
						</div>
						<div class="info m-l5">
							<div class="title">{{ v.userName }}</div>
							<div class="text">
								{{
									[
										"",
										"任务指派",
										"质量监督巡检",
										"节点前置/后置",
										"任务预警/督办",
										"项目任务审核",
									][v.msgContent.jobType]
								}}
								<span class="m-l5">{{ v.msgContent.projectName }}</span>
							</div>
						</div>
						<div class="time" style="margin-left: auto">
							<div>
								<svg-icon icon-class="invest-icon-l-col4" class="icon" />
								{{ stringSubing(v.createTime) }}
							</div>
							<div>
								<el-button style="color: #fff" size="small" color="#7D7D9A">{{
										v.msgContent.projectName
									}}</el-button>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script setup>
import { ref, reactive, onMounted, watch, onBeforeMount } from "vue";
import { useRoute, useRouter } from "vue-router";
import {ElRow, ElCol, ElButton, ElCalendar, ElAvatar, ElSwitch} from "element-plus";
import CommonTitle from "@/components/CommonTitle.vue";
import { consoleApi } from "@/api/investment.js";
import Schedule from "@/views/investmentProjectManagement/consoleManagement/schedule.vue";
import {useStore} from "vuex";
import PublicTable from "@/components/PublicTable.vue";

const route = useRoute();
const router = useRouter();
const store = useStore();

const isActive = ref(true);


const typeofBusinessList =  [
	{
		label: '养老',
		value: 1
	},
	{
		label: '教育',
		value: 2
	},
	{
		label: '医疗',
		value: 3
	},
	{
		label: '农贸',
		value: 4
	},
	{
		label: '综合体',
		value: 5
	},
	{
		label: '绿道',
		value: 6
	},
	{
		label: '文体',
		value: 7
	},
	{
		label: '子公司',
		value: 8
	},
	{
		label: '其他',
		value: 9
	}
];

/**
 * 获取项目业态
 * @param typeOfBusiness
 */
const getProjectBusiness = (typeOfBusiness) => {
	for (let item of typeofBusinessList){
		if(item.value === typeOfBusiness){
			return item.label;
		}
	}
}

// 字符串截取
const stringSubing = (str) => {
	if (!str) return "-";
	return str.substring(0, 10);
};
const state = reactive({
	timeValue: "",
	behalfList: [],
	topTabs: [
		{
			icon: "invest-icon-l-1",
			name: "工具库",
			id: "0",
		},
		{
			icon: "invest-icon-l-2",
			name: "周报管理",
			id: '1'
		},
		{
			icon: "invest-icon-l-3",
			name: "待办管理",
			id: "2",
		},
		{
			icon: "invest-icon-l-4",
			name: "预备项目库",
			id: "3",
		},
		{
			icon: "invest-icon-l-5",
			name: "投资项目",
			id: "4",
		},
		{
			icon: "invest-icon-l-6",
			name: "会议信息",
			id: "5",
		},
	],
	myProject: [],
	data: [],
});

const tableOption = ref([
	{
		label: "项目名称",
		prop: "projectName",
		overHidden:false,
		minWidth: 300,
	},
	{
		label: "项目类型",
		prop: "projectTypeName",
		minWidth: 100,
	},
	{
		label: "项目业态",
		prop: "typeOfBusiness",
		formatter: (val, row) => {
			return getProjectBusiness(row.typeOfBusiness);
		},
		minWidth: 80,
	},
	{
		label: "项目负责人",
		prop: "responsibleUserName",
		minWidth: 100,
	},
	{
		label: "计划完成时间",
		prop: "planEndTime",
		minWidth: 120,
	},
]);

const pageParam = ref({
	total: 0,
	current: 1,
	size: 20,
});

const toPath = (key) => {
	switch (key) {
		case "0":
			router.push(
					"/investmentProjectManagement/toolLibraryManagement/toolLibrary"
			);
			break;
		case "1":
			router.push("/investmentProjectManagement/weeklyReport/departmentalWeeklyReport");
			break;
		case "2":
			router.push("/investmentProjectManagement/consoleManagement/myToDoList");
			break;
		case "3":
			router.push("/constructionProjectManage/preliminaryProject/index");
			break;
		case "4":
			router.push(
					"/investmentProjectManagement/investmentProjects/investmentProjectInformation/investmentProjectsList"
			);
			break;
		case "5":
			router.push("/investmentProjectManagement/meetingsManagement");
			break;

		default:
			break;
	}
};
const getUserJoinProject = () => {
	consoleApi.getUserJoinProject().then((res) => {
		console.log(res);
		if (res.code == 200) {
			state.myProject = res.data;
		}
	});
};
const getUserTask = () => {
	consoleApi.getUserTask().then((res) => {
		console.log(res);
		if (res.code == 200) {
			state.total = res.data.total;
			state.done = res.data.done;
			state.doing = res.data.doing;
		}
	});
};
const getProjectMsgPage = () => {
	consoleApi
			.getProjectMsgPage({
				pageNum: 1,
				pageSize: 10,
				param: {
					businessType: "5",
				},
			})
			.then((res) => {
				console.log(res);
				if (res.code == 200) {
					state.behalfList = res.data.content;
				}
			});
};
const getUserProjectAnalyze = () => {
	consoleApi
			.getUserProjectAnalyze({
				pageNum: 1,
				pageSize: 1,
				param: {},
			})
			.then((res) => {
				console.log(res);
				if (res.code == 200) {
					state.data = res.data.content;
				}
			});
};
onBeforeMount(() => {
	getUserProjectAnalyze();
});
onMounted(() => {
	getUserTask();
	getUserJoinProject();
	getProjectMsgPage();
	console.log('xxxxx',store.state.user
	)
});
</script>
<style lang="scss" scoped>
.content_ {
	width: 100%;
	display: flex;
	justify-content: space-between;
}
.left_content {
	width: 998px;

	.topTabs {
		width: 100%;
		height: 143px;
		background: #fff;
		box-shadow: 0px 0px 2px 1px rgba(0, 0, 0, 0.1);
		border-radius: 10px;
		align-items: center;
		.item {
			cursor: pointer;
			// width: 82px;
			// margin: 0 calc((100% - 82px * 5) / 5 / 2);
			text-align: center;
			.icon {
				display: inline-block;
				width: 42px;
				height: 42px;
				.icon_ {
					width: 42px;
					height: 42px;
				}
			}

			.name {
				margin-top: 10px;
				font-size: 16px;
				font-weight: 700;
				color: #1a1a1a;
				white-space:nowrap;
			}
		}
	}

	.table-list-content{
		flex: 1;
	}
	.my_project {
		flex-wrap: wrap;
		max-height: 420px;
		overflow-y: auto;
		.item {
			width: 312px;
			height: 192px;
			border-radius: 12px;
			border: 1px solid #e3e7f1;
			padding: 22px;
			margin: 0 calc((100% - 312px * 3) / 3 / 2);
			margin-bottom: 20px;
			.title {
				font-size: 18px;
				font-weight: 700;
				color: #1a1a1a;
			}

			.col {
				margin-top: 12px;
				.icon {
					width: 14px;
					height: 14px;
				}
				.col_title,
				.text {
					font-size: 14px;
					font-weight: 400;
					color: #666666;
				}
				.text {
					color: #1a1a1a;
				}
			}
			.time {
				margin-top: 10px;
				text-align: right;
				font-size: 12px;
				font-weight: 400;
				color: #666666;
			}
		}
	}
	.zwu {
		margin: 20px 0;
		width: 100%;
		height: 40px;
		text-align: center;
		font-size: 14px;
		color: #ccc;
	}
}

.right_content {
	width: calc(100% - 998px - 40px);
	.top_info {
		.title_info {
			.img {
				width: 54px;
				height: 54px;
				border-radius: 8px;
			}
			.name {
				font-size: 22px;
				font-weight: 700;
				color: #000000;
			}
			.section {
				font-size: 14px;
				font-weight: 400;
				color: #7d7d9a;
			}
		}
		.top_info_cont {
			justify-content: space-between;
			.item {
				padding: 15px 8% 18px 7%;
				display: flex;
				flex-direction: column;
				align-items: center;

				.num {
					font-size: 26px;
					font-weight: bold;
					color: #ffffff;
				}
				.text {
					font-size: 14px;
					font-weight: 400;
					color: #ffffff;
					margin-top: 5px;
					width: 60px;
					text-align: center;
				}
			}
			.item:nth-child(1){
				background: url("@/assets/iconImg/bg1.png")no-repeat;
				background-size: 100% 100%;
			}
			.item:nth-child(2) {
				background: url("@/assets/iconImg/bg2.png")no-repeat;
				background-size: 100% 100%;
			}
			.item:nth-child(3) {
				background: url("@/assets/iconImg/bg3.png")no-repeat;
				background-size: 100% 100%;
			}
		}
	}

	.behalf {
		width: 100%;
		min-height: 500px;
		max-height: 926px;
		border-radius: 12px;
		border: 1px solid #e3e7f1;
		overflow: hidden;
		.timeM {
			:deep(.el-calendar-table__row) {
				height: 40px !important;
				.current,
				.prev,
				.next {
					height: 40px !important;
					.el-calendar-day {
						height: 40px;
					}
				}
			}
		}
		.text_conten {
			padding: 15px;
			.item {
				padding-bottom: 10px;
				border-bottom: 1px dotted #e3e7f1;
				.icon {
					width: 43px;
					height: 43px;
				}
				.info {
					.title {
						font-size: 14px;
						font-weight: 700;
						color: #1a1a1a;
					}
					.text {
						width: 200px;
						font-size: 12px;
						margin-top: 5px;
						color: #7d7d9a;
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
					}
				}
				.time {
					.icon {
						width: 12px;
						height: 12px;
					}
					font-size: 12px;
					color: #b3b3b3;
				}
			}
		}
	}
}
</style>
